<template>
    <div class='search'>
            <div class="navbar">
                <van-icon name="arrow-left" size="25" @click="gohome"/>
                <h1 class="nav-header">猫眼电影</h1>
                <div class="nav-icon">
                    <img src="https://p0.meituan.net/scarlett/f05f61e7a8f3f45fd071c068d7a26870356.png" alt="">
                </div>
            </div> 
        <div class="searchbar">
            <form action="/">
                <van-search
                    v-model="value"
                    show-action
                    placeholder="搜电影、搜影院"
                    @search="onSearch"
                    @cancel="onCancel"
                    clearable
                />
            </form>
        </div>
        <div class="container">
            <div class="motype" v-if="this.movielist.length==0?false:true">
                电影/电视剧/综艺
            </div>
            <div class="movielist"  v-if="this.movielist.length==0?false:true">
                <van-card v-for="item in movielist" :key="item.id" @click="goDetail(item.id)">
                        <template #title>
                        <span class="title">
                            {{item.nm}} 
                        </span>
                        <span class="type" v-if="item.version">
                            <span class="typenum">{{item.version.substr(1,1)+item.version.substr(2,1).toUpperCase()}}</span><span class="imax">{{item.version.substr(3,10)}}</span>
                        </span>
                        </template>
                        <template #desc>
                        <div class="desc">
                            <div v-if="item.wish" >
                                <span class="wish">{{item.wish}}</span>人想看
                            </div>
                            <div v-if="item.sc">
                            观众评：<span class="grade">{{item.sc}}分</span>
                            </div>
                            <div>主演：{{item.star}}</div>
                            <div> {{item.rt}}</div>
                        </div>
                        </template>
                        <template #thumb>
                        <img :src="item.img.replace('/w.h','')" alt="" />
                        </template>
                        <template #footer>
                            <van-button type="danger" size="small" v-if="item.globalReleased">购票</van-button>
                            <van-button type="info" size="small" v-if="!item.globalReleased">预售</van-button>
                        </template>
                </van-card>
            </div>
            <div class="cinemalist"  v-if="this.cinemalist.length==0?false:true">
                <van-card   v-for="item in cinemalist" :key="item.id" @click="gocinemaDetail(item.id) "
                :desc="item.addr"
                :title="item.nm"
                >
                <template #tags>
                    <van-tag plain type="danger"  color="#7EB3C1" text-color="#7EB3C1" v-if="item.sell">座</van-tag>&nbsp;&nbsp;

                    <van-tag plain type="danger" color="#7EB3C1" text-color="#7EB3C1"  v-for="item2 in item.hallType" :key="item2">{{item2}}</van-tag>&nbsp;&nbsp;
                    <!-- <van-tag plain type="danger">折扣卡</van-tag>&nbsp;&nbsp; -->
                    <van-tag plain type="danger" v-if="item.endorse==1?true:false">改签</van-tag>&nbsp;&nbsp;
                    <van-tag plain type="danger" v-if="item.snack==1?true:false">小吃</van-tag> &nbsp;&nbsp;
                </template>
                <template #footer>
                    <div class="price"><span class="p-num"> {{item.sellPrice}}</span>元起</div>
                    <div class="meter">{{item.distance}}</div>
                </template>
            </van-card>
            </div>
            <div class="nocontent"  v-if="(this.movielist.length==0 && this.cinemalist.length==0)?true:false">
                    无内容
            </div>  
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { Icon,Search,Card, Tag, List,Button} from 'vant';
import uri from '@/config/uri'
import pinyin from '../../../node_modules/js-pinyin/index'
Vue.use(List);
Vue.use(Card);
Vue.use(Tag);
Vue.use(Button)
Vue.use(Icon);
Vue.use(Search);
export default {
     data() {
        return {
        value: '',
        movielist:'',
        cinemalist:''
        };
     },
    created(){
        this.$store.commit('common/setIsShow',false)
    },
    methods:{
        gohome(){
            this.$router.go(-1)
        },
         onSearch(val) {
            console.log(val);
            let val2 = pinyin.getFullChars(val)
            console.log(val2);
            let cityid = localStorage.getItem('cityid')
            //搜索
             this.$http.get(uri.search+'?kw='+val2+'&cityId=55'+'&stype=-1').then((req) => {
                 console.log(req);
                 if(JSON.stringify(req) != "{}"){
                    this.movielist = req.movies.list
                    this.cinemalist = req.cinemas.list
                    console.log(this.movielist);
                    console.log(this.cinemalist);
                 }
                 else
                  {
                      this.movielist = ''
                    this.cinemalist = ''
                  }
             })

        },
        onCancel() {
            this.$router.push('/')
        }, 
        goDetail(id){
            this.$router.push('/film/:filmId='+id);
        },
        gocinemaDetail(id){
            this.$router.push('/cinemaDetail?cinemaId='+id)
        }
    },
    beforeDestroy(){
        this.$store.commit('common/setIsShow',true)
    }
}
</script>
<style scoped>
.container {
    padding:10px;
    box-sizing: border-box;
}
.navbar {
        box-sizing: border-box;
        padding:0 10px 0 10px;
        position:fixed;
        top:0;
         z-index: 100;
        width:100%;
        height: 50px;
        color: #fff;
        background: #e54847;
        border-bottom: 1px solid #e54847;
        display: flex;
        align-items: center;
    } 
    .nav-header {
        margin-left: 50px;
        width:270px;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        line-height: 50px;
    }
    .nav-icon img{
        margin-left: 25px;
        margin-top:5px;
        width:17px;
        height: 16px;
    }
    .searchbar {
        margin-top:52px;
    }
.motype {
    font-size: 15px;
    color: #999;
    padding: 9px 15px;
    border:1px solid gray;
}
.van-card {
    border:1px solid gray;
}
.seegrade {
     position: absolute;
    left: 4px;
    bottom: 30px;
    color: #faaf00;
    font-size: 11px;
    font-weight: 600;
 }
 .filmname {
     position:absolute;
     bottom: 10px;
     left:10px;
     font-size: 12px;
     padding-left: 10px;
 }
.van-card__thumb img{
    width:66px;
    height: 94px;
    border-radius: 0;
}
.title {
    display: inline-block;
    font-size: 17px;
    color: #333;
    font-weight: 700;
    padding-right: 5px;
    margin-bottom: 5px;
}
.desc {
    font-size: 13px;
    color: #666;
}
.grade {
    font-weight: 700;
    color: #faaf00;
    font-size: 15px;
}
.wish {
    color: #faaf00;
    font-size: 15px;
    font-weight: 600;
}
.type {
    display: inline-block;
    width:45px;
    border:1px solid #509FC9;
    border-left: 0;
}
.typenum {
    display: inline-block;
    width:20px;
    height: 15px;
    color:white;
    text-align: center;
    background-color: #509FC9;
}
.imax {
    display: inline-block;
    text-align: center;
    width: 25px;
    height: 15px;
    color:#509FC9;
}
.van-card__footer {
    width:20%;
    position: absolute;
    top:20px;
    right:10px;
}
.cinemalist {
    margin-top:20px;
}
.cinemalist .van-card {
    height: 124px;
    margin-bottom:20px;
    /* border-top: 1px solid gray;
     border-bottom: 1px solid gray; */
     box-sizing: border-box;
     padding:20px;
}
.cinemalist .van-card__header {
    width:80%;
    float:left;
    line-height: 20px;
}
.cinemalist .van-card__footer {
    width:20%;
    float: left;
}
.cinemalist .van-card__title {
    line-height: 23px;
    font-size: 16px;
    color: #000;
}
.cinemalist .price {
    color: #f03d37;
    margin-bottom: 10px;
}
.cinemalist .p-num {
    font-size: 18px;
}
.cinemalist .meter {
    font-size: 13px;
    color: #666;
}
</style>